<template>
  <div class="q-pa-md" style="width: 1200px">
    <t-carousel
      v-model="slide"
      control-color="primary"
      infinite
      navigation
      :listDataSource="listDataSource"
      urlField="Url"
      imgSize="cover"
      coverType="cover"
      containType="center"
      height="400px"
      :autoplay="0"
      swipeable
    >
    </t-carousel>
  </div>
</template>

<script>
  import { reactive, ref } from 'vue';

  export default {
    setup() {
      const obj = reactive([
        { Url: 'https://cdn.quasar.dev/img/mountains.jpg' },
        { Url: 'https://cdn.quasar.dev/img/parallax1.jpg' },
        { Url: 'https://cdn.quasar.dev/img/parallax2.jpg' },
        { Url: 'https://cdn.quasar.dev/img/quasar.jpg' },
      ]);
      return {
        slide: ref(0),
        listDataSource: obj,
      };
    },
  };
</script>
